<template>
  <div>
    <button class="bu"></button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped>
/* div{
background-color: #42378f;
background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
} */
button {
  width: 200px;
  height: 50px;
  cursor: pointer;
  background: none;
  border: none;
}
.bu {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
button:before,
button:after {
  content: "Hover!";
  letter-spacing: 4px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  position: absolute;
  z-index: -1;
  width: 200px;
  height: 50px;
  transition: 500ms;
}

button:before {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
}

button:after {
  width: 0px;
  overflow: hidden;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) translateX(100px);
  color: rgba(255, 255, 255, 0.5);
}

button:hover:before {
  width: 0px;
  transform: translateY(-50%) translateX(100px);
}

button:hover:after {
  width: 200px;
  transform: translateY(-50%) translateX(0px);
}

button:focus {
  outline: none;
}
</style>

